<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="id"
      :indent="20"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :pagination="false"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" @click="openDrawer('新增', 1, initRows)">新增菜单 </el-button>
      </template>
      <!-- 单选 -->
      <!-- <template #radio="scope">
        <el-radio v-model="radio" :label="scope.row.id">
          <i></i>
        </el-radio>
      </template> -->
      <!-- Expand -->
      <!-- <template #expand="scope">
        {{ scope.row }}
      </template> -->
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button
          v-auth="'add'"
          type="primary"
          link
          :icon="CirclePlus"
          @click="openDrawer('新增', 2, { parentId: scope.row.id })"
        >
          新增
        </el-button>
        <el-button v-auth="'get'" type="primary" link @click="openDrawer('查看', 2, scope.row)"> 查看 </el-button>
        <el-button v-auth="'update'" type="primary" link @click="openDrawer('编辑', 2, scope.row)"> 编辑 </el-button>
        <el-button v-auth="'delete'" type="primary" link @click="deleteChild(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <menDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { Menu } from "@/api/interface";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
// import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
// import { Delete, EditPen, CirclePlus, View } from "@element-plus/icons-vue";
// import authMenuList from "@/assets/json/authMenuList.json";
import ProTable from "@/components/ProTable/index.vue";
import { deleteMenu, updateMenu, createMenu, getDict, getListMenu } from "@/api/modules/sys";
import menDrawer from "./menDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { arrayToTree } from "@/utils/index";
//import { ElMessage } from "element-plus";

const proTable = ref();
const cxt = getCurrentInstance();
const dict = cxt?.appContext.config.globalProperties.$dict;
const menuList = ref();
// 单选
// const radio = ref("");
// 设置列样式
// const tableRowClassName = ({ rowIndex }: { row: User.ResUserList; rowIndex: number }) => {
//   if (rowIndex === 2) return "warning-row";
//   if (rowIndex === 6) return "success-row";
//   return "";
// };
// 单击行
// const rowClick = (row: Menu.ResMenuList, column: TableColumnCtx<Menu.ResMenuList>) => {
//   if (column.property == "radio" || column.property == "operation") return;
//   // if (!row.isSelected) {
//   //   proTable.value!.element?.setCurrentRow(row);
//   // } else {
//   //   proTable.value!.element?.setCurrentRow();
//   // }
//   // row.isSelected = !row.isSelected;
//   // console.log(row, column, proTable.value);
//   // ElMessage.success("当前行被点击了！");
// };
// 表格配置项
const columns: ColumnProps[] = [
  // { type: "expand", label: "Expand", width: 100 },
  { type: "index", label: "#", width: 150 },
  // { prop: "radio", label: "单选", width: 80 },
  { prop: "name", label: "菜单名称", align: "left" },
  { prop: "icon", label: "菜单图标" },
  { prop: "nameEn", label: "菜单名称(英文)" },
  { prop: "url", label: "菜单URL", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 300, fixed: "right" }
];
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  // 处理返回参数
  console.log(arrayToTree(data));
  return arrayToTree(data);
  // return {
  //   list: arrayToTree(data),
  //   total: data.total,
  //   pageNum: data.current,
  //   pageSize: data.size
  // };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  console.log(params);
  // 处理请求参数
  // const newParams = {
  //   currentPage: params.pageNum,
  //   searchKey: params.searchKey ? params.searchKey : "",
  //   typeId: ""
  // };
  // let newParams = JSON.parse(JSON.stringify(params));
  // newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  // newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  // delete newParams.createTime; // newParams
  // newParams
  return getListMenu();
};
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof menDrawer> | null>(null);
const initRows = {
  isHide: false,
  isFull: false,
  isAffix: false,
  isKeepAlive: true
};
const openDrawer = (title: string, type: number, row: Partial<Menu.ResMenuList> = {}) => {
  const params = {
    title,
    type,
    isView: title === "查看",
    menuList,
    row: { ...row },
    api: title === "新增" ? createMenu : title === "编辑" ? updateMenu : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};

const deleteChild = async (params: Partial<Menu.ResMenuList> = {}) => {
  await useHandleData(deleteMenu, { id: params.id }, `删除【${params.name}】`);
  proTable.value?.getTableList();
  // params.parentId === parentRow.value.id
  //   ? proTableChild.value?.getTableList()
  //   : refreshDate(proTableChild.value.tableData, params);
};
// mount
onMounted(async () => {
  const { data } = await getDict({ parentId: dict.menuId });
  menuList.value = data || [];
});
</script>

<style lang="scss">
.el-table .warning-row,
.el-table .warning-row .el-table-fixed-column--right,
.el-table .warning-row .el-table-fixed-column--left {
  background-color: var(--el-color-warning-light-9);
}
.el-table .success-row,
.el-table .success-row .el-table-fixed-column--right,
.el-table .success-row .el-table-fixed-column--left {
  background-color: var(--el-color-success-light-9);
}
</style>
